---
layout: default
title: "Button Social - Sleek Admin Dashboard Template"


parent: "components"
sub_parent: "components"
activePage: "button-social"
plugins: []
---

							<div class="breadcrumb-wrapper">
								<h1>Button Social</h1>
								{% include breadcrumb.htm %}
							</div>

							<ul class="nav nav-tabs nav-style-border mb-5" id="myTab" role="tablist">
								<li class="nav-item">
									<a class="nav-link active" id="home-tab" data-toggle="tab" href="#rounded" role="tab" aria-controls="rounded" aria-selected="true">Rounded Buttons</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" id="profile-tab" data-toggle="tab" href="#square" role="tab" aria-controls="square" aria-selected="false">Square Buttons</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" id="contact-tab" data-toggle="tab" href="#pill" role="tab" aria-controls="pill" aria-selected="false">Pill Buttons</a>
								</li>
							</ul>
							<div class="tab-content" id="myTabContent">
								<div class="card card-default">
									<div class="card-body">
										<p>To use a social button you have to add any of these classes: <code>.btn-facebook, .btn-twitter, .btn-google-plus, .btn-linkedin, .btn-pinterest, .btn-tumblr, .btn-dropbox</code> with <code>.btn</code>.</p>
									</div>
								</div>
								<!-- Rounded Button -->
								<div class="tab-pane fade show active" id="rounded" role="tabpanel" aria-labelledby="home-tab">
									<!-- First Row  -->
									<div class="row">
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Social Buttons</h2>
												</div>
												<div class="card-body">
													<p class="mb-5"> For social button for example <code> .btn .btn-facebook </code>. </p>
													<button type="button" class="mb-1 btn btn-facebook">
														<i class="mdi mdi-facebook"></i>
													</button>
													<button type="button" class="mb-1 btn btn-twitter">
														<i class="mdi mdi-twitter"></i>
													</button>
													<button type="button" class="mb-1 btn btn-google-plus">
														<i class="mdi mdi-google-plus"></i>
													</button>
													<button type="button" class="mb-1 btn btn-linkedin">
														<i class="mdi mdi-linkedin"></i>
													</button>
													<button type="button" class="mb-1 btn btn-pinterest">
														<i class="mdi mdi-pinterest"></i>
													</button>
													<button type="button" class="mb-1 btn btn-tumblr">
														<i class="mdi mdi-tumblr"></i>
													</button>
													<button type="button" class="mb-1 btn btn-vimeo">
														<i class="mdi mdi-vimeo"></i>
													</button>
													<button type="button" class="mb-1 btn btn-dropbox">
														<i class="mdi mdi-dropbox"></i>
													</button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Social Outline Buttons</h2>
												</div>
												<div class="card-body">
													<p class="mb-5"> For social outline button for example <code> .btn .btn-outline .btn-facebook </code>. </p>
													<button type="button" class="mb-1 btn btn-outline btn-facebook">
														<i class="mdi mdi-facebook"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-twitter">
														<i class="mdi mdi-twitter"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-google-plus">
														<i class="mdi mdi-google-plus"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-linkedin">
														<i class="mdi mdi-linkedin"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-pinterest">
														<i class="mdi mdi-pinterest"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-tumblr">
														<i class="mdi mdi-tumblr"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-vimeo">
														<i class="mdi mdi-vimeo"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-dropbox">
														<i class="mdi mdi-dropbox"></i>
													</button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Social Buttons with text</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook text">
														<i class="mdi mdi-facebook"></i>Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter text">
														<i class="mdi mdi-twitter"></i>Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus text">
														<i class="mdi mdi-google-plus"></i>Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin text">
														<i class="mdi mdi-linkedin"></i> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest text">
														<i class="mdi mdi-pinterest"></i>Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr text">
														<i class="mdi mdi-tumblr"></i>Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo text">
														<i class="mdi mdi-vimeo"></i>Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox text">
														<i class="mdi mdi-dropbox"></i>Dropbox </button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Social Buttons with text</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-outline text">
														<i class="mdi mdi-facebook"></i>Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-outline text">
														<i class="mdi mdi-twitter"></i>Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-outline text">
														<i class="mdi mdi-google-plus"></i>Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-outline text">
														<i class="mdi mdi-linkedin"></i> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-outline text">
														<i class="mdi mdi-pinterest"></i>Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-outline text">
														<i class="mdi mdi-tumblr"></i>Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-outline text">
														<i class="mdi mdi-vimeo"></i>Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-outline text">
														<i class="mdi mdi-dropbox"></i>Dropbox </button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Social text Buttons</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook text"> Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter text"> Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus text"> Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin text"> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest text"> Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr text"> Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo text"> Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox text"> Dropbox </button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Social text Buttons</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-outline text"> Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-outline text"> Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-outline text"> Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-outline text"> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-outline text"> Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-outline text"> Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-outline text"> Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-outline text"> Dropbox </button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Social text Large Buttons</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-lg text"> Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-lg text"> Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-lg text"> Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-lg text"> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-lg text"> Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-lg text"> Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-lg text"> Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-lg text"> Dropbox </button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Social text Large Buttons</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-outline btn-lg text"> Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-outline btn-lg text"> Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-outline btn-lg text"> Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-outline btn-lg text"> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-outline btn-lg text"> Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-outline btn-lg text"> Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-outline btn-lg text"> Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-outline btn-lg text"> Dropbox </button>
												</div>
											</div>
										</div>
									</div>
								</div>
								<!-- /.Rounded Button -->
								<!-- Square Button -->
								<div class="tab-pane fade " id="square" role="tabpanel" aria-labelledby="profile-tab">
									<div class="row">
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Square Social Buttons</h2>
												</div>
												<div class="card-body">
													<p class="mb-5"> For square social button for example <code> .btn .btn-facebook .btn-square </code>. </p>
													<button type="button" class="mb-1 btn btn-facebook btn-square">
														<i class="mdi mdi-facebook"></i>
													</button>
													<button type="button" class="mb-1 btn btn-twitter btn-square">
														<i class="mdi mdi-twitter"></i>
													</button>
													<button type="button" class="mb-1 btn btn-google-plus btn-square">
														<i class="mdi mdi-google-plus"></i>
													</button>
													<button type="button" class="mb-1 btn btn-linkedin btn-square">
														<i class="mdi mdi-linkedin"></i>
													</button>
													<button type="button" class="mb-1 btn btn-pinterest btn-square">
														<i class="mdi mdi-pinterest"></i>
													</button>
													<button type="button" class="mb-1 btn btn-tumblr btn-square">
														<i class="mdi mdi-tumblr"></i>
													</button>
													<button type="button" class="mb-1 btn btn-vimeo btn-square">
														<i class="mdi mdi-vimeo"></i>
													</button>
													<button type="button" class="mb-1 btn btn-dropbox btn-square">
														<i class="mdi mdi-dropbox"></i>
													</button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Square Social Outline Buttons</h2>
												</div>
												<div class="card-body">
													<p class="mb-5"> For square social outline button for example <code> .btn btn-outline .btn-facebook .btn-square </code>. </p>
													<button type="button" class="mb-1 btn btn-outline btn-facebook btn-square">
														<i class="mdi mdi-facebook"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-twitter btn-square">
														<i class="mdi mdi-twitter"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-google-plus btn-square">
														<i class="mdi mdi-google-plus"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-linkedin btn-square">
														<i class="mdi mdi-linkedin"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-pinterest btn-square">
														<i class="mdi mdi-pinterest"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-tumblr btn-square">
														<i class="mdi mdi-tumblr"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-vimeo btn-square">
														<i class="mdi mdi-vimeo"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-dropbox btn-square">
														<i class="mdi mdi-dropbox"></i>
													</button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Square Social Buttons with text</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-square text">
														<i class="mdi mdi-facebook"></i>Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-square text">
														<i class="mdi mdi-twitter"></i>Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-square text">
														<i class="mdi mdi-google-plus"></i>Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-square text">
														<i class="mdi mdi-linkedin"></i> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-square text">
														<i class="mdi mdi-pinterest"></i>Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-square text">
														<i class="mdi mdi-tumblr"></i>Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-square text">
														<i class="mdi mdi-vimeo"></i>Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-square text">
														<i class="mdi mdi-dropbox"></i>Dropbox </button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Square Social Outline Buttons with text</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-outline btn-square text">
														<i class="mdi mdi-facebook"></i>Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-outline btn-square text">
														<i class="mdi mdi-twitter"></i>Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-outline btn-square text">
														<i class="mdi mdi-google-plus"></i>Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-outline btn-square text">
														<i class="mdi mdi-linkedin"></i> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-outline btn-square text">
														<i class="mdi mdi-pinterest"></i>Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-outline btn-square text">
														<i class="mdi mdi-tumblr"></i>Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-outline btn-square text">
														<i class="mdi mdi-vimeo"></i>Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-outline btn-square text">
														<i class="mdi mdi-dropbox"></i>Dropbox </button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Square Social text Buttons</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-square text"> Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-square text"> Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-square text"> Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-square text"> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-square text"> Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-square text"> Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-square text"> Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-square text"> Dropbox </button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Square Social Outline text Buttons</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-outline btn-square text"> Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-outline btn-square text"> Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-outline btn-square text"> Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-outline btn-square text"> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-outline btn-square text"> Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-outline btn-square text"> Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-outline btn-square text"> Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-outline btn-square text"> Dropbox </button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Square Social text Buttons</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-square btn-lg text"> Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-square btn-lg text"> Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-square btn-lg text"> Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-square btn-lg text"> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-square btn-lg text"> Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-square btn-lg text"> Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-square btn-lg text"> Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-square btn-lg text"> Dropbox </button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Square Social Outline text Large Buttons</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-outline btn-square btn-lg text"> Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-outline btn-square btn-lg text"> Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-outline btn-square btn-lg text"> Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-outline btn-square btn-lg text"> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-outline btn-square btn-lg text"> Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-outline btn-square btn-lg text"> Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-outline btn-square btn-lg text"> Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-outline btn-square btn-lg text"> Dropbox </button>
												</div>
											</div>
										</div>
									</div>
								</div>
								<!-- /.Rounded Button -->
								<!-- Pill Button -->
								<div class="tab-pane fade" id="pill" role="tabpanel" aria-labelledby="contact-tab">
									<div class="row">
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Pill Social Buttons</h2>
												</div>
												<div class="card-body">
													<p class="mb-5"> For pill social button for example <code> .btn .btn-facebook .rounded-circle </code>. </p>
													<button type="button" class="mb-1 btn btn-facebook rounded-circle">
														<i class="mdi mdi-facebook"></i>
													</button>
													<button type="button" class="mb-1 btn btn-twitter rounded-circle">
														<i class="mdi mdi-twitter"></i>
													</button>
													<button type="button" class="mb-1 btn btn-google-plus rounded-circle">
														<i class="mdi mdi-google-plus"></i>
													</button>
													<button type="button" class="mb-1 btn btn-linkedin rounded-circle">
														<i class="mdi mdi-linkedin"></i>
													</button>
													<button type="button" class="mb-1 btn btn-pinterest rounded-circle">
														<i class="mdi mdi-pinterest"></i>
													</button>
													<button type="button" class="mb-1 btn btn-tumblr rounded-circle">
														<i class="mdi mdi-tumblr"></i>
													</button>
													<button type="button" class="mb-1 btn btn-vimeo rounded-circle">
														<i class="mdi mdi-vimeo"></i>
													</button>
													<button type="button" class="mb-1 btn btn-dropbox rounded-circle">
														<i class="mdi mdi-dropbox"></i>
													</button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Pill Social Buttons</h2>
												</div>
												<div class="card-body">
													<p class="mb-5"> For pill social button for example <code> .btn btn-outline .btn-facebook .rounded-circle </code>. </p>
													<button type="button" class="mb-1 btn btn-outline btn-facebook rounded-circle">
														<i class="mdi mdi-facebook"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-twitter rounded-circle">
														<i class="mdi mdi-twitter"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-google-plus rounded-circle">
														<i class="mdi mdi-google-plus"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-linkedin rounded-circle">
														<i class="mdi mdi-linkedin"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-pinterest rounded-circle">
														<i class="mdi mdi-pinterest"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-tumblr rounded-circle">
														<i class="mdi mdi-tumblr"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-vimeo rounded-circle">
														<i class="mdi mdi-vimeo"></i>
													</button>
													<button type="button" class="mb-1 btn btn-outline btn-dropbox rounded-circle">
														<i class="mdi mdi-dropbox"></i>
													</button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Pill Social Buttons with text</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-pill text">
														<i class="mdi mdi-facebook"></i>Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-pill text">
														<i class="mdi mdi-twitter"></i>Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-pill text">
														<i class="mdi mdi-google-plus"></i>Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-pill text">
														<i class="mdi mdi-linkedin"></i> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-pill text">
														<i class="mdi mdi-pinterest"></i>Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-pill text">
														<i class="mdi mdi-tumblr"></i>Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-pill text">
														<i class="mdi mdi-vimeo"></i>Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-pill text">
														<i class="mdi mdi-dropbox"></i>Dropbox </button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Pill Social Buttons with text</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-outline btn-pill text">
														<i class="mdi mdi-facebook"></i>Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-outline btn-pill text">
														<i class="mdi mdi-twitter"></i>Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-outline btn-pill text">
														<i class="mdi mdi-google-plus"></i>Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-outline btn-pill text">
														<i class="mdi mdi-linkedin"></i> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-outline btn-pill text">
														<i class="mdi mdi-pinterest"></i>Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-outline btn-pill text">
														<i class="mdi mdi-tumblr"></i>Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-outline btn-pill text">
														<i class="mdi mdi-vimeo"></i>Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-outline btn-pill text">
														<i class="mdi mdi-dropbox"></i>Dropbox </button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Pill Social Text Buttons</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-pill text"> Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-pill text"> Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-pill text"> Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-pill text"> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-pill text"> Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-pill text"> Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-pill text"> Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-pill text"> Dropbox </button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h2>Pill Social Text Buttons</h2>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-outline btn-pill text"> Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-outline btn-pill text"> Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-outline btn-pill text"> Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-outline btn-pill text"> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-outline btn-pill text"> Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-outline btn-pill text"> Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-outline btn-pill text"> Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-outline btn-pill text"> Dropbox </button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h4>Social Text Large Buttons</h4>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-pill btn-lg text"> Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-pill btn-lg text"> Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-pill btn-lg text"> Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-pill btn-lg text"> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-pill btn-lg text"> Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-pill btn-lg text"> Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-pill btn-lg text"> Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-pill btn-lg text"> Dropbox </button>
												</div>
											</div>
										</div>
										<div class="col-lg-6">
											<div class="card card-default">
												<div class="card-header card-header-border-bottom">
													<h4>Social Text Large Buttons</h4>
												</div>
												<div class="card-body">
													<button type="button" class="mb-1 btn btn-facebook btn-outline btn-pill btn-lg text"> Facebook </button>
													<button type="button" class="mb-1 btn btn-twitter btn-outline btn-pill btn-lg text"> Twitter </button>
													<button type="button" class="mb-1 btn btn-google-plus btn-outline btn-pill btn-lg text"> Google+ </button>
													<button type="button" class="mb-1 btn btn-linkedin btn-outline btn-pill btn-lg text"> Linkedin </button>
													<button type="button" class="mb-1 btn btn-pinterest btn-outline btn-pill btn-lg text"> Pinterest </button>
													<button type="button" class="mb-1 btn btn-tumblr btn-outline btn-pill btn-lg text"> Tumblr </button>
													<button type="button" class="mb-1 btn btn-vimeo btn-outline btn-pill btn-lg text"> Vimeo </button>
													<button type="button" class="mb-1 btn btn-dropbox btn-outline btn-pill btn-lg text"> Dropbox </button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
